<template>
  <div class="userInfo">
      <div class="avatar">
          <img :src="users.avatar" alt v-if="users.avatar" />
          <div class="svg" v-else>
              <svg  t="1587545175014" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10677" width="32" height="32">
                  <path d="M0 512a512 512 0 1 0 1024 0 512 512 0 0 0-1024 0z" fill="#7FC2FF" p-id="10678"></path>
                  <path d="M840.594286 850.797714A463.542857 463.542857 0 0 1 511.707429 987.428571 463.542857 463.542857 0 0 1 182.857143 850.797714v-299.264C182.857143 368.128 330.093714 219.428571 511.707429 219.428571c181.650286 0 328.886857 148.699429 328.886857 332.068572 0.731429 173.092571 0.731429 272.859429 0 299.300571z" fill="#EBF9FF" p-id="10679"></path>
                  <path d="M329.142857 457.142857a54.857143 54.857143 0 1 0 109.714286 0 54.857143 54.857143 0 0 0-109.714286 0zM585.142857 457.142857a54.857143 54.857143 0 1 0 109.714286 0 54.857143 54.857143 0 0 0-109.714286 0zM402.285714 585.142857a109.714286 109.714286 0 0 0 219.428572 0" fill="#66B5FF" p-id="10680"></path></svg>
          </div>
      </div>
      <div class="user">
          <div class="users-detail">
              <span class="nickname">{{ users.nickname }}</span>
              <template>
                  <svg class="icon" aria-hidden="true" v-if="users.sex === 1">
                      <use xlink:href="#icon-nan" />
                  </svg>
                  <svg class="icon" aria-hidden="true" v-else-if="users.sex === 2">
                      <use xlink:href="#icon-nv" />
                  </svg>
              </template>
          </div>
          <div class="datetime">{{users.createTime | dateformat("YYYY年MM月DD日 HH:mm:ss")}}</div>
      </div>
  </div>
</template>

<script>
export default {
    name: 'detailHeader',
    props: {
        users: {
            type: Object,
            required: true
        }
    },
    data () {
        return {
            loading: true,
            isLoaded: false
        };
    }
};
</script>

<style scoped lang="less">
@import "../../../assets/css/global-element-style.less";
.userInfo {
  padding: 8px 16px;
  display: flex;
  height: 46px;
  background-color: #fff;
  .avatar {
    width: 46px;
    & > * {
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }
  }
  .user {
    padding-left: 0.3rem;
    font-size: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .users-detail {
      flex: 1;
      display: flex;
      align-items: center;
      .nickname {
        font-size: 14px;
        font-weight: bolder;
      }
      .icon {
        width: 0.7rem;
        height: 0.7rem;
        margin: 0 4px;
      }
    }
    .datetime {
      flex: 1;
      line-height: 23px;
      color: #8c8c8c;
    }
  }
}
</style>
